<template>
  <div>
    <div id="breadcrumb">
      <a-breadcrumb>
        <a-breadcrumb-item>S{{ season }}赛季排行榜</a-breadcrumb-item>
      </a-breadcrumb>
    </div>
    <a-card :bordered="false">
      <a-col>
        <template>
          <div class="btn-select">
            <a-select
                :defaultActiveFirstOption="false"
                :options="options"
                allowClear
                placeholder="请选择赛季"
                style="width: 120px"
                @change="handleChange"
            />
          </div>
        </template>
      </a-col>
      <a-table
          size="middle"
          rowKey="id"
          :columns="columns"
          :data-source="rank"
          :pagination="false"
      >
        <template slot="player_id" slot-scope="text">
          <router-link :to="`/rank/detail/${text}`">
            {{ text }}
          </router-link>
        </template>
        <template slot="name" slot-scope="text, record">
          <div>
            {{ record.player }}
            <a-tag color="red" v-if="record.countsnum.fails > 2">
              {{ record.countsnum.fails }}连败
            </a-tag>
            <a-tag color="green" v-if="record.countsnum.wins > 2">
              {{ record.countsnum.wins }}连胜
            </a-tag>
          </div>
        </template>
        <template slot="rate" slot-scope="text, record">
          <div>
            {{ record.rate + '%' }}
          </div>
        </template>
        <template slot="action" slot-scope="text, record">
          <div>
            <router-link
                :to="`/rank/detail/${record.player_id}`"
            >详情
            </router-link>
          </div>
        </template>
      </a-table>
    </a-card>
  </div>
</template>

<script>
export default {

  name: 'Users',

  data () {
    return {
      columns: [
        {
          title: 'ID',
          dataIndex: 'player_id',
          scopedSlots: { customRender: 'player_id' }
        },
        {
          title: '玩家姓名',
          dataIndex: 'player',
          scopedSlots: { customRender: 'name' }
        },
        {
          title: '玩家总得分',
          dataIndex: 'score'
        },
        {
          title: '胜场',
          dataIndex: 'wins'
        },
        {
          title: '负场',
          dataIndex: 'fail'
        },
        {
          title: '胜率',
          dataIndex: 'rate',
          scopedSlots: { customRender: 'rate' }
        },
        {
          title: 'mvp次数',
          dataIndex: 'mvp'
        },
        {
          title: '操作',
          dataIndex: 'action',
          scopedSlots: { customRender: 'action' }
        }
      ],
      rank: [],
      options: [],
      season: 1
    }
  },

  mounted () {
    this.fetchList()
    this.fetchSeason()
  },

  methods: {
    fetchList () {
      this.$http.get('api/admin/rank').then((result) => {
        this.rank = result
      }, (error) => {
        this.$message.error(error.message)
      })
    },
    fetchSeason () {
      this.$http.get('api/admin/season/select').then((result) => {
        const data = [...result]
        this.options = result
        this.season = data.pop()['key']
      }, (error) => {
        this.$message.error(error.message)
      })
    },
    handleChange (value) {
      this.season = value
      this.$http.get(`api/admin/rank?season=${value}`).then((result) => {
        this.rank = result
      }, (error) => {
        this.$message.error(error.message)
      })
    }
  }
}
</script>

<style scoped>
#breadcrumb {
  margin-top: 0;
  margin-bottom: 10px;
}

.btn-select {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 15px;
}
</style>